<template>
  <div
    v-loading="store.loading"
    class="csdev-code-view"
  >
    <div class="csdev-code-view__preview">
      <preview-com />
    </div>
    <div class="csdev-code-view__config">
      <div class="csdev-code-view__form-container">
        <basic-form />
        <el-divider content-position="left">
          接口选择
        </el-divider>
        <api-form />
        <el-divider content-position="left">
          listPage配置
        </el-divider>
        <list-page-form />
      </div>
      <div class="csdev-code-view__actions">
        <el-button @click="handler.onPreview">
          预览
        </el-button>
        <el-button
          type="primary"
          @click="handler.onCreateModule"
        >
          生成模块
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted } from 'vue'
  import PreviewCom from './components/preview/index.vue'
  import BasicForm from './components/basic-form.vue'
  import ApiForm from './components/api-form.vue'
  import ListPageForm from './components/list-page-form.vue'
  import { useHandler, useStore, useWatch } from './hooks'
  import type { Store } from './types'

  defineOptions({
    name: 'CsDevCode'
  })

  const store = useStore()
  const handler = useHandler(store as Store)
  useWatch(store)
  onMounted(handler.init)
</script>

<style>
  .csdev-code-view {
    height: 700px;
    display: flex;
    overflow: hidden;
  }
  .csdev-code-view__preview {
    flex: 1;
    width: 0;
    overflow-y: auto;
  }
  .csdev-code-view__config {
    width: 480px;
    margin-left: 12px;
    display: flex;
    flex-direction: column;
  }
  .csdev-code-view__preview,
  .csdev-code-view__config {
    background: #fff;
    border-radius: 8px;
    height: 100%;
  }
  .csdev-code-view__form-container {
    flex: 1;
    height: 0;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .csdev-code-view__actions {
    text-align: center;
    padding: 10px 0;
    border: 1px #ededed solid;
  }
</style>
